<template>
  <div class="app-container">
    <!--如果在组件上写一个属性
        且这个属性没在props里面定义
        且也不是原生的style样式属性class类名属性
        那么vue会把它收集到$attrs对象里面
        在组件模板里通过$attrs[名字]取值
        在实例里 通过this.$attrs[名字]取值
    -->
    <!--父组件可以通过标签自定义属性传值给子组件 子组件通过props来接收父组件传的值
    子组件通过标签{{自定义属性}}来使用-->
    <!--如果要使用数据模型里面的值必须绑定 ：-->

    <!--
    组件上:propName.sync='a'
    修饰符 允许当前修饰的这个prop在组件里面被修改
    但是必须采用 特定的方式
    组件内部 this.$emit('update： propName',newValue（想要更新的值）)
    -->
    <!--<zizujian1 :ref="children[0]" :visible="isShow"
    @updateVisible='isShow = false' :a="b">123</zizujian1>-->
    <zizujian1 :ref="children[0]" :visible.sync="isShow" @test='changeAltMsg' :a="b">
      <!--<span slot="slota"></span>-->
    </zizujian1>
    <h1>{{altMsg}}</h1>
    <button @click="isShow = false">hidden</button>
    <div :ref="originTag">我是原生标签</div>
    <zizujian2 :ref="children[1]"></zizujian2>
    <img :src="src" :alt="altMsg">
    <!---->
    <!--<item v-for="val in arr" :item-value="val" :key="val"></item>  属性传值-->
    <!--<item v-for="val in arr" :key="val">{{val}}</item>  &lt;!&ndash;
    内容传值 需要占个位置 solt&ndash;&gt;-->
    <!--<item v-for="val in arr" :key="val">-->
      <!--<span slot="power">&#45;&#45;{{val}}&#45;&#45;power</span>-->
      <!--<span slot="hdmi">&#45;&#45;{{val}}&#45;&#45;hami</span>-->
      <!--<span slot="usb">&#45;&#45;{{val}}&#45;&#45;usb</span>-->
    <!--</item>-->
  </div>
</template>

<script>
/* eslint-disable indent */

import zizujian1 from './components/zizujian1'; //  局部组件
import zizujian2 from './components/zizujian2'; //  局部组件
import item from './components/item';

export default {
  name: 'App',
  components: { zizujian1, zizujian2, item }, //  导入注册在哪个组件里 那么我就成为谁的子组件
  data() {
    return {
      isShow: true,
      a: 1,
      b: 2,
      arr: [1, 2, 3, 4, 5, 6, 7],
      children: ['zzj1', 'zzj2'],
      altMsg: '这是一张图片',
      src: '1.png',
      originTag: 11,
    };
  },
  methods: {
    changeAltMsg(data) {
     this.altMsg = data;
    },
  },
  mounted() {
    // this.$refs.zzj1.msg1 = 'hello word!';
    // this.$refs.zzj1.msg1 = this.a;
  },
};
</script>

<style>
</style>
